<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">

        <!-- 绑定class样式，字符串写法。（适用于样式的类名不确定，需要动态指定） -->
        <div class="hhm" :class="myClass1" @click="changeClass">点击切换</div>
        <div class="hhm" :class="myClass2" @click="randomClass">点击随机切换</div>

        <!-- 绑定class样式，数组写法。（适用于样式的个数不确定，名字也不确定） -->
        <div class="hhm" :class="myClass3">
            动态增删
            <button @click="addHhm4">添加hhm4</button>
            <button @click="deleteHhm4">删除hhm4</button>
        </div>

        <!-- 绑定class样式，对象写法。（适用于样式的个数、名字确定，但要动态决定用不用） -->
        <div class="hhm" :class="myClass4">
            动态增删
            <button @click="changeHhm4">修改hhm4</button>
            <button @click="changeHhm5">修改hhm5</button>
        </div>

    </div>
</body>

<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            myClass1: 'hhm1',
            myClass2: 'hhm1',
            myClass3: [],
            myClass4: {
                hhm4: false,
                hhm5: false,
            }
        },
        methods: {
            changeClass() {
                console.log("点击切换样式")
                this.myClass1 = 'hhm2'
            },
            randomClass() {
                let arrayClass = ['hhm1', 'hhm2', 'hhm3'];
                //生成一个0到1的随机数，然后乘3，就是0-3的随机数，再取整。
                let index = Math.floor(Math.random() * 3);
                this.myClass2 = arrayClass[index];
            },
            addHhm4() {
                this.myClass3.push('hhm4')
            },
            deleteHhm4() {
                this.myClass3.shift();
            },
            changeHhm4(){
                this.myClass4.hhm4 = !this.myClass4.hhm4;
            },
            changeHhm5(){
                this.myClass4.hhm5 = !this.myClass4.hhm5;
            }
        }
    });

    Vue.config.productionTip = false  //阻止 vue 在启动时生成生产提示。
</script>

</html>

<style>
    .hhm {
        border: solid 1px black;
        margin: 10px;
        padding: 10px;
    }

    /* hhm1-3是三选一的样式 */
    .hhm1 {
        background-color: red;
    }

    .hhm2 {
        background-color: blue;
    }

    .hhm3 {
        background-color: yellow;
    }

    /* hhm4-5是可以同时存在的样式 */
    .hhm4 {
        font-size: 24px;
    }

    .hhm5 {
        border-radius: 20px;
    }
</style>